<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <script>
            // 3. 没有块级作用域引起的问题： for 的块级
            // 3.1 无闭包
            // var btns = document.getElementsByTagName('button');
            // for (var i = 0; i<btns.length; i++) {
            //     btns[i].addEventListener('click', function() {
            //         console.log("第" + (i+1) + '个按钮被点击');
            //     }) 
            // }
            // 3.2 有闭包
            // for (var i = 0; i<btns.length; i++) {
            //     (function (i) {
            //         btns[i].addEventListener('click', function() {
            //         console.log("第" + (i+1) + '个按钮被点击');
            //         })
            //     })(i)
            // }

            // 3.3 let
            const btns = document.getElementsByTagName('button');
            for (let i = 0; i<btns.length; i++) {
                btns[i].addEventListener('click', function() {
                    console.log("第" + (i+1) + '个按钮被点击');
                }) 
            }
        </script>
    </body>
</html>